<template>
	<view class="all">
		<view class="box" v-for="(item,index) in topicList" :key="item.id">
			<view class="img">
				<image style="height: 400rpx;width: 100%;" :src="item.scene_pic_url" mode=""></image>
			</view>
			<view class="title">
				{{item.title}}
			</view>
			<view class="tips">
				{{item.subtitle}}
			</view>
			<view class="price">
				￥<text style="margin: 0 10rpx;">{{item.price_info}}</text>元起
			</view>
		</view>
		<view class="btn">
			<button class="up" style="width: 50%;" :disabled="canUp" @click="goDownPage(-1)">
				上一页
			</button>
			<button class="down" style="width: 50%;" @click="goDownPage(1)" :disabled="canDown">
				下一页
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			this.getList()
		},
		data() {
			return {
				topicList: [],
				page: 1,
				totalPage: '',
				size: 10,
				canUp: false,
				canDown: false
			};
		},
		methods: {
			getList() {
				this.$request({
					url: 'topic/list',
					data: {
						page: this.page,
						size: this.size
					},
					successCb: res => {
						console.log(res);
						let {
							currentPage,
							data,
							totalPages,
							pageSize
						} = res
						this.topicList = data
						this.totalPage = totalPages
						if (this.page == 1) {
							this.canUp = true
							this.canDown = false
						}
						if (this.page == totalPages) {
							this.canUp = false
							this.canDown = true
						}

					}
				})
			},
			goDownPage(val) {
				this.page += val
				this.getList()

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #efefef;
	}

	.box {
		background-color: #fff;
		height: 650rpx;
		// border: 1px solid red;
		text-align: center;
		margin-bottom: 40rpx;

		.img {
			height: 400rpx;
			// border: 1px solid blue;
		}

		.title {
			font-size: 36rpx;
			margin: 20rpx 0;
		}

		.tips {
			font-size: 32rpx;
			margin: 40rpx 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.price {
			color: #9B0000;
			font-size: 28rpx
		}
	}

	.btn {
		display: flex;
		margin-bottom: 70rpx;
	}
</style>
